<!---->
<template>
<el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="email" label="邮箱">
            <el-input
              v-model="ruleForm.email"
              placeholder="请输入邮箱"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              :placeholder="'请输入密码'"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请再次输入密码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入昵称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';

export default {
//import引入的组件需要注入对象中才能用
components:{},
data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
return {
regType:'',
      ruleForm: {
        email: "",
        pass: "",
        checkPass: "",
        name: "",
      },
      rules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.API.addUser(this.ruleForm).then(res=>{
            if(res.message.code == 200){
              this.ruleForm.email = ""
              this.ruleForm.name = ""
              this.ruleForm.pass = ""
              this.ruleForm.checkPass = ""
              this.$message({
                message:res.message.msg,
                type:'success'
              })
              
            }else{
              this.$message({
                message:res.message.msg,
                type:'error'
              })
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期-挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {},//生命周期-创建之前
beforeMount() {},//生命周期-挂载之前
beforeUpdate() {},//生命周期-更新之前
updated() {},//生命周期-更新之后
beforeDestroy() {},//生命周期-销毁之前
destroyed() {},//生命周期-销毁完成
activated() {},//如果页面有keep-alive缓存功能，这个会输会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

</style>